<template>
<div class="chart-wrapper">
    <h3 class="chart-title">历年粮食播种量占比</h3>
    <dv-active-ring-chart :config="config" style="width:600px;height:600px" />
</div>
</template>

<script setup>
import { reactive,onMounted } from 'vue';
import axios from 'axios';

const config = reactive({
    data: [],
    digitalFlopStyle: {
        fontSize: 20
    },
    radius: '45%',
    activeRadius: '55%',
    color: ['#FF8960', '#6BEAFF', '#80FF61'],
    lineWidth: 30
})

function getData(){
        axios.get('/api/querySeedRatio')
        .then((response)=>{
            if(response.data.code==200){
                let obj = reactive({})
                let yobj = response.data.data[0];
                console.log(yobj);
                    obj = [{
                        name: '豆类',
                        value: yobj.beansAreSownInArea
                    },
                    {
                        name: '薯类',
                        value: yobj.potatoSownArea
                    },
                    {
                        name: '谷类',
                        value: yobj.grainSownArea
                    }]
                    config.data = obj;
            }
        })
    }
    onMounted(()=>{
        getData();
    })
</script>

<style scoped>
.chart-wrapper {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: transparent;
}

.chart-title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: left;
    padding-left: 20px;
}
</style>